<template>
  <div>
    <van-nav-bar title="首页" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-row>
      <van-col span="4" style="font-size: 16px;color: #666;">类别：</van-col>
      <van-col span="20">
        <van-button v-for="i, x in tlist" :key="x" @click="addType(i.id)">{{ i.name }}</van-button>
      </van-col>

    </van-row>
    <van-row>
      <van-col span="4">标签：</van-col>
      <van-col span="20">
        <van-button v-for="i, x in taglist" :key="x" @click="addlabel(i.id)">{{ i.name }}</van-button>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="12">
        <van-button @click="sx">已上线</van-button>
        <van-button @click="jj">即将上线</van-button>
      </van-col>
      <van-col span="12" style="text-align:right;">
        <van-button @click="zx">最新</van-button>
        <van-button @click="zr">最热</van-button></van-col>

    </van-row>

    <van-card :price="i.price" desc="描述信息" :title="i.name" 
    :thumb="i.url"
      v-for="(i, index) in clist" :key="index"><template #footer>
        <van-button v-if="i.type==3" @click="buy(i.id)">加入购物车</van-button>
        <van-button size="mini" @click="xq(i.id)">详情</van-button>
      </template></van-card>



    <van-pagination v-model="currentPage" :total-items="total" :items-per-page="page_size" @change="getCourse" />

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">课程</van-tabbar-item>
      <van-tabbar-item icon="search">路径</van-tabbar-item>
      <van-tabbar-item icon="friends-o">讨论区</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      currentPage: 1,
      total: 0,
      page_size: 2,
      clist: [],
      tlist: [],
      taglist: [],
      typeid: 0,
      tagid: 0,
      online: 0,
      orderbyid: 0
    }
  },
  methods: {
    xq(id) {
      this.$router.push("/detail/"+id)
    },
    addType(id) {
      this.typeid = id
      this.getCourse(1)
    },
    addlabel(id) {
      this.tagid = id
      this.getCourse(1)
    },
    sx() {
      this.online = 1
      this.getCourse(1)
    },
    jj() {
      this.online = 2
      this.getCourse(1)
    },
    zx() {
      this.orderbyid = 1
      this.getCourse(1)
    },
    zr() {
      this.orderbyid = 2
      this.getCourse(1)
    },
      getCourse(page) {
        console.log(this.typeid,this.tagid)
      this.axios.get("getHomeGourse?page=" + page + "&type=" + this.typeid + "&tagid=" + this.tagid + "&online=" + this.online + "&orderbyid=" + this.orderbyid).then(res => {
        this.clist = res.data.clist
        this.total = res.data.total
        this.page_size = res.data.page_size
        this.tlist = res.data.tlist
          this.taglist = res.data.taglist
        console.log(this.clist, this.total, this.page_size, this.taglist)
      })
    },
    buy(id) {
      this.axios.post('addcart', { "userid": localStorage.getItem("userid"), "goodsid": id }).then(res => {

      })
    }
  },
  mounted() {
    this.getCourse(1)
  },


}
</script>

<style>

</style>